import { Horizontal, Vertical } from '../layout/FlexBox'
import { Space } from '../layout/Space'
import { FlexAlign } from '../layout/flex-box-store'
import { Input } from '../widgets/Input'
import { Line } from '../widgets/Line'
import { Text } from '../widgets/Text'

export function InputWord(props: { label: string; placeHolder: string }) {
  return (
    <Vertical space={90}>
      <Space value={10} />
      <Horizontal space={80}>
        <Text label={props.label} space={160} fontSize={24} color="#555" align={FlexAlign.start} />
        <Input
          fontSize={24}
          placeholder={props.placeHolder}
          placeholderColor="#bbbcc2"
          align={FlexAlign.end}
          border="none"
        />
      </Horizontal>
      <Line />
    </Vertical>
  )
}
